<template>
    <div class="quotes-create">
        <el-form :model="form" ref="mform" :rules="rules" class="form"
                 :label-width="formLabelWidth" size="small">
            <el-form-item label="背景图" prop="imageUrl">
                <file-picker v-model="form.imageUrl"
                              :info="form.image"
                              @change="handleFileChange"
                              :is-view="isView"></file-picker>
            </el-form-item>
            <el-form-item label="名言" prop="content">
                <el-input v-model="form.content"
                          type="textarea"
                          autocomplete="off"
                          style="width:280px;"
                          :rows="4"
                          :disabled="isView"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
                <el-input v-model="form.author" autocomplete="off" style="width:280px;" :disabled="isView"></el-input>
            </el-form-item>

            <el-form-item label="日期颜色" prop="date_color">
                <el-color-picker
                    v-model="form.date_color"
                    :predefine="predefineColors">
                </el-color-picker>
            </el-form-item>
            <el-form-item label="字体颜色" prop="content_color">
                <el-color-picker
                    v-model="form.content_color"
                    :predefine="predefineColors">
                </el-color-picker>
            </el-form-item>
            <el-form-item label="字体位置" prop="content_position">
                <el-radio-group v-model="form.content_position">
                    <el-radio-button label="c">居中</el-radio-button>
                    <el-radio-button label="b">居下</el-radio-button>
                    <el-radio-button label="lc">左中</el-radio-button>
                    <el-radio-button label="lb">左下</el-radio-button>
                    <el-radio-button label="rc">右中</el-radio-button>
                    <el-radio-button label="rb">右下</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="isView">
                <el-button type="primary" @click="close()" size="medium">确 定</el-button>
            </el-form-item>
            <el-form-item v-else>
                <el-button type="primary" @click="submit()" size="medium">确 定</el-button>
                <el-button @click="close()" size="medium">取 消</el-button>
            </el-form-item>
        </el-form>
        <div class="preview-wrap">
            <div class="preview">
                <div class="bg"
                     :style="{
                        backgroundImage: 'url(' + form.imageUrl + ')',
                        width: bgdata.w + 'px',
                        height: bgdata.h + 'px',
                     }"></div>
                <div class="pa time"
                      :style="{
                          left: timedata.border.l + 'px',
                          top: timedata.border.t + 'px',
                          width: timedata.border.w + 'px',
                          height: timedata.border.h + 'px',
                          borderColor: form.date_color,
                      }"></div>
                <div class="pa txt day"
                     :style="{
                          top: timedata.day.p.t + 'px',
                          fontSize: timedata.day.f + 'px',
                          color: form.date_color,
                     }">{{timedata.day.t}}</div>
                <div class="pa txt month"
                     :style="{
                          top: timedata.month.p.t  + 'px',
                          fontSize: timedata.month.f + 'px',
                          color: form.date_color,
                     }">{{timedata.month.t}}</div>
                <div class="pa txt year"
                     :style="{
                          top: timedata.year.p.t + 'px',
                          fontSize:timedata.year.f + 'px',
                          color: form.date_color,
                     }">{{timedata.year.t}}</div>
                <div class="pa time-sep"
                     :style="{
                          left: timedata.sep.s.x + 'px',
                          top: timedata.sep.s.y + 'px',
                          width: (timedata.sep.e.x - timedata.sep.s.x) + 'px',
                          borderColor: form.date_color,
                     }"></div>

                <div v-for="(it, idx) in wisdoms"
                      class="pa txt-wisdom"
                      :class="{
                          'author-sep': it === '___SPLIT_LINE___'
                      }"
                      :style="{
                          top: bgdata.isBt ? (bgdata.fp[wisdoms.length - idx].t + 'px'): (bgdata.fp[idx].t + 'px'),
                          fontSize: bgdata.f + 'px',
                          color: form.content_color,
                          borderColor: form.content_color,
                          textAlign: bgdata.fp[idx].ta,

                          marginTop: it === '___SPLIT_LINE___' ? (bgdata.sep.mt + 'px'): '0px',
                          left: it === '___SPLIT_LINE___' ? (bgdata.sep.x1 + 'px'): (bgdata.fp[idx].l + 'px'),
                          width: it === '___SPLIT_LINE___' ? ((bgdata.sep.x2 - bgdata.sep.x1) + 'px'): bgdata.fp[idx].m + 'px',
                      }">{{it === '___SPLIT_LINE___' ? '': it}}</div>

                <!--<div v-if="form.author">
                    <div class="pa txt-wisdom author-sep"
                          :style="{
                              top: bgdata.fp[wisdoms.length].t + 'px',
                              left: bgdata.sep.x1 + 'px',
                              width: (bgdata.sep.x2 - bgdata.sep.x1) + 'px',
                              marginTop: bgdata.sep.mt + 'px',
                              borderColor: form.content_color,
                          }"></div>
                    <div class="pa txt-wisdom author"
                          :style="{
                              top: bgdata.fp[wisdoms.length + 1].t + 'px',
                              fontSize: bgdata.f + 'px',
                              color: form.content_color,
                          }" v-text="form.author"></div>
                </div>-->

                <div class="pa avatar"
                       :style="{
                           left: infodata.user.avatar.l + 'px',
                           top: infodata.user.avatar.t + 'px',
                           width: 2 * infodata.user.avatar.r + 'px',
                           height: 2 * infodata.user.avatar.r + 'px'
                       }">
                    <img :src="avatar" />
                </div>
                <div class="pa name"
                     :style="{
                         left: infodata.user.name.l + 'px',
                         top: infodata.user.name.t + 'px',
                         fontSize: infodata.user.name.f + 'px'
                     }">{{loginUser.nickname || loginUser.loginname}}</div>
                <div class="pa qrcode"
                     :style="{
                        left: infodata.qr.l + 'px',
                        top: infodata.qr.t + 'px',
                        width: infodata.qr.w + 'px',
                        height: infodata.qr.h + 'px'
                     }">
                    <img src="/assets/images/wxmpcode.jpg" />
                </div>
                <div class="pa title"
                     :style="{
                        left: infodata.t1.l + 'px',
                        top: infodata.t1.t + 'px',
                        fontSize: infodata.t1.f + 'px'
                     }">{{title}}</div>
                <div class="pa sub-title"
                     :style="{
                        left: infodata.t2.l + 'px',
                        top: infodata.t2.t + 'px',
                        fontSize: infodata.t2.f + 'px'
                     }">{{subTitle}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';

    export default {
        props: [ 'show', 'modId', 'isView' ],
        data() {
            return {
                formLabelWidth: '120px',
                winName: '新增',
                items: [],
                loading: false,
                predefineColors: [
                    '#FFF',
                    '#CCC',
                    '#AAA',
                    '#999',
                    '#666',
                    '#333',
                    '#000',
                ],
                // wisdoms: [],
                form: {
                    content: '',
                    image_file_id: '',
                    author: '',
                    date_color: '#FFF',
                    content_color: '#FFF',
                    content_position: 'c',

                    imageUrl: '',
                },
                roles: [],
                rules: {
                    content: [
                        { required: true, message: '请输入名言', trigger: 'blur' }
                    ]
                },

                // preview
                width: 375,
                height: 667,
                title: '志乐教育',
                subTitle: '为教育行业提供专业数字化服务',
                timedata: {
                    day: {
                        t: 1,
                        f: 28,
                        p: {
                            l: 375 / 2,
                            t: 38,
                        },
                    },
                    month: {
                        t: 'Jan',
                        f: 12,
                        p: {
                            l: 375 / 2,
                            t: 74,
                        }
                    },
                    year: {
                        t: 2019,
                        f: 12,
                        p: {
                            l: 375 / 2,
                            t: 88,
                        }
                    },
                    border: {
                        l: 375 / 2 - 20,
                        t: 36,
                        w: 40,
                        h: 72,
                    },
                    sep: {
                        s: {
                            x: 375 / 2 - 14,
                            y: 73
                        },
                        e: {
                            x: 375 / 2 + 14,
                            y: 73
                        }
                    }
                },
                bgdata: {
                    w: 375,
                    h: 667,
                    f: 18,
                    fp: [],
                    isBt: false,
                    sep: {
                        x1: 375 / 2 - 6,
                        x2: 375 / 2 + 6,
                        mt: 20 * 1 / 2
                    }
                },
                infodata: {
                    t1: {
                        f: 15,
                        l: 20,
                        t: 667 - 70,
                        m: 375 - 120
                    },
                    t2: {
                        f: 9,
                        l: 20,
                        t: 667 - 50 ,
                        m: 375 - 120
                    },
                    user: {
                        name: {
                            // t: _.get(app.globalData, 'user.user_name', ''),
                            f: 14,
                            l: 85,
                            t: 667 - 132,
                            m: 375 - 100
                        },
                        avatar: {
                            l: 20,
                            t: 667 - 160,
                            r: 30,
                        }
                    },
                    qr: {
                        l: 375 - 120,
                        t: 667 - 120,
                        w: 100,
                        h: 100
                    }
                }
            }
        },
        components: {

        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            this.init();
        },
        watch: {
            '$route' (to, from) {
                // this.groupId = this.$route.params.groupId;
                // this.refresh();
            },
            'show'(val) {
                if(val) {
                    this.init();
                }
            },
            'form.content'(val) {
                /*if(val) {
                    this.wisdoms = val.split(/[(\r\n)\r\n]+/);
                } else {
                    this.wisdoms = [];
                }*/
            },
            'form.content_position'() {
                this.draw_b_bg_data();
            },
            'form.imageUrl'(val, old) {
                if(val != old) {
                    this.$set('form.imageUrl', val);
                }
            }
        },
        filters: {
            adminTypeLabel( type ) {
                if( type == 'SUPER') {
                    return '超级管理员';
                } else if(type == '_SUPER') {
                    return '系统管理员';
                } else {
                    return '管理员';
                }
            }
        },
        computed: {
            ...mapState([
                'loginUser',
            ]),
            'wisdoms'() {
                let val = this.form.content;
                let quotes = [];

                if(val) {
                    quotes = val.split(/[(\r\n)\r\n]+/);
                }

                if(this.form.author) {
                    quotes.push('___SPLIT_LINE___');
                    quotes.push(this.form.author);
                }

                return quotes;
            },
            'avatar'() {
                return (this.loginUser && this.loginUser.avatar) || '/assets/images/logo-rect.png';
            }
        },
        methods: {
            ...mapActions([
            ]),
            async init() {

                this.form.content = '';
                this.form.image_file_id = "";
                this.form.author = "";
                this.form.date_color = "#FFF";
                this.form.content_color = '#FFF';
                this.form.imageUrl = '';

                this.$refs.mform && this.$refs.mform.resetFields();

                if(this.modId) {
                    let data = await this.$japi.quote.getQuote(this.modId);

                    if(data) {
                        this.form = data;
                        this.form.imageUrl = _.get(data, 'image.file_path');
                    }
                }

                this.draw_b_bg_data();
                this.draw_b_time_data();
                this.draw_b_info_data();
            },
            handleFileChange(file) {
                if(file) {
                    this.form.image_file_id = file.id;
                } else {
                    this.form.image_file_id = null;
                }
            },
            submit() {
                this.$refs.mform.validate((valid) => {
                    if (valid) {
                        this._submit();
                    } else {
                        return false;
                    }
                });
            },
            async _submit() {
                let ret;

                this.loading = true;

                if(this.modId && this.form.id) {
                    ret = await this.$japi.quote.update(this.form);
                } else {
                    ret = await this.$japi.quote.create(this.form);
                }

                this.loading = false;

                if(ret) {
                    this.close(true);
                    this.$message('操作成功！');
                }
            },
            close(flag) {
                this.$emit('close', flag);
            },

            draw_b_time_data(scale = 1) {
                let date = new Date();
                let year = date.getFullYear()
                let month = date.getMonth();  // date.getMonth() + 1
                let day = date.getDate()
                let MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                let width = this.width * scale;
                let height = this.height * scale;

                let timedata = {
                    day: {
                        t: day,
                        f: 28 * scale,
                        p: {
                            l: width / 2,
                            t: 38 * scale,
                        },
                    },
                    month: {
                        t: MONTH_LABELS[month],
                        f: 12 * scale,
                        p: {
                            l: width / 2,
                            t: 74 * scale,
                        }
                    },
                    year: {
                        t: year,
                        f: 12 * scale,
                        p: {
                            l: width / 2,
                            t: 88 * scale,
                        }
                    },
                    border: {
                        l: width / 2 - 20 * scale,
                        t: 36 * scale,
                        w: 40 * scale,
                        h: 72 * scale,
                    },
                    sep: {
                        s: {
                            x: width / 2 - 14 * scale,
                            y: 73 * scale
                        },
                        e: {
                            x: width / 2 + 14 * scale,
                            y: 73 * scale
                        }
                    }
                };

                this.timedata = timedata;

                return timedata;
            },
            draw_b_bg_data(scale = 1) {

                let w = this.width * scale;
                let h = this.height * scale - 140 * scale;
                let f = 18 * scale;
                let fp = [];
                let position = this.form.content_position || 'c';
                let isBt = false;

                if([ 'b', 'lb', 'rb' ].indexOf(position) >= 0) {
                    isBt = true;
                }

                for (let i = 0; i < 20; i++) {
                    // if (i < 7) {
                    let ta = 'center';
                    let t = h * 29 / 60 + 32 * i * scale;

                    if([ 'c', 'b' ].indexOf(position) >= 0) {
                        ta = 'center';
                    } else if([ 'lc', 'lb' ].indexOf(position) >= 0) {    // lb, cb, rc
                        ta = 'left';
                    } else if([ 'rc', 'rb' ].indexOf(position) >= 0) {    // lb, cb, rc
                        ta = 'right';
                    }

                    if([ 'b', 'lb', 'rb' ].indexOf(position) >= 0) {
                        t = h - 40 * scale - 32 * i * scale;
                    }

                    fp.push({
                        l: 20 * scale, // w / 2,
                        t: t,
                        m: w - 40 * scale,
                        ta: ta,
                    });
                    // }
                }

                let x1 = w / 2 - 6 * scale;
                let x2 = w / 2 + 6 * scale;

                if([ 'lc', 'lb' ].indexOf(position) >= 0) {
                    x1 = 20 * scale;
                    x2 = x1 + 12 * scale;
                } else if([ 'rc', 'rb' ].indexOf(position) >= 0) {
                    x1 = w - 34 * scale;
                    x2 = w - 22 * scale;
                }

                let sep = {
                    x1: x1,
                    x2: x2,
                    mt: 20 * scale / 2
                };

                let bgdata = {
                    w,
                    h,
                    f,
                    fp,
                    sep,
                    isBt
                };

                this.bgdata = bgdata;

                return bgdata;
            },
            draw_b_info_data(scale = 1) {

                let width = this.width * scale;
                let height = this.height * scale;
                let infodata = {
                    t1: {
                        f: 15 * scale,
                        l: 20 * scale,
                        t: height - 70 * scale,
                        m: width - 120 * scale
                    },
                    t2: {
                        f: 9 * scale,
                        l: 20 * scale,
                        t: height - 50 * scale,
                        m: width - 120 * scale
                    },
                    user: {
                        name: {
                            // t: _.get(app.globalData, 'user.user_name', ''),
                            f: 14 * scale,
                            l: 85 * scale,
                            t: height - 132 * scale,
                            m: width - 100 * scale
                        },
                        avatar: {
                            l: 20 * scale,
                            t: height - 160 * scale,
                            r: 30 * scale,
                        }
                    },
                    qr: {
                        l: width - 120 * scale,
                        t: height - 120 * scale,
                        w: 100 * scale,
                        h: 100 * scale
                    }
                };

                this.infodata = infodata;

                return infodata;
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .quotes-create {
        display:flex;
        justify-content: space-around;
        min-width: 800px;

        .form {
            width:500px;
        }
        .preview-wrap {
            width:380px;
            height:550px;
            overflow: hidden;
            /*padding:5px;*/
        }
        .preview {
            position: absolute;
            top:-10px;
            right:0px;
            width:375px;
            height:667px;
            background: #FFF;
            box-shadow: 0 0 5px #CCC;
            transform: scale(0.8);
            /*transform-origin:100% 0;*/

            .bg {
                background: #666;
                background-size: cover;
                background-position: center;
            }
            .pa {
                position: absolute;
            }
            .txt {
                color: #FFF;
                width: 100%;
                text-align: center;
            }
            .time {
                border: 1px solid #FFF;
            }
            .time-sep {
                border-top: 1px solid #FFF;
            }
            .avatar {
                border-radius: 50%;
                overflow: hidden;
                transform: scale(1);

                img {
                    width:100%;
                }
            }
            .qrcode {
                img {
                    width:100%;
                }
            }
            .name {
                color: #333;
            }
            .title {
                color: #2BA245;
            }
            .sub-title {
                color: #999;
            }
            .txt-wisdom {
                width: 100%;
                text-align: center;
                color: #FFF;
                /*left: 50%;
                transform: translateX(-50%);*/
            }
            .author-sep {
                border-top: 1px solid #FFF;
            }
        }
    }
</style>
